<script setup lang="ts">
// 各大区业绩占比
import { storeToRefs } from 'pinia'
import { reactive, watch } from 'vue'
import EchartPie from '@/components/Echart/pie/index.vue'
import { useHomeStore } from '@/stores/module/home'
import { isMobile } from '@/Utils/global'
import { headersStore } from '@/stores/apiHeader'
import { useDialogStore } from '@/stores/dialog'
const dialogStore = useDialogStore()
const { dialogInfo } = dialogStore
const dialogInfoVisible = dialogInfo.visible
const homeStore = useHomeStore() // 创建store实例
const { homeAreaPie } = storeToRefs(homeStore)

const headerStore = headersStore()
const { language_id } = storeToRefs(headerStore)

const top = isMobile() ? '34%' : '26%'

const options = reactive({
  name: 'homeAreaPie',
  legend: {
    top: top,
    suffixHidden: true,
    left: '34%',
    rich: {
      a: {
        width: language_id.value == 'zh-cn' ? 95 : 115,
      },
      b: {
        width: 85,
      },
      c: {
        width: 30,
      },
    },
  },
  series: {
    center: ['17%', '50%'],
  },
  data: homeAreaPie.value.info,
})

// 如果是弹窗中
if (dialogInfo.visible) {
  options.legend.top = '35%'
  options.legend.rich.a.width = 200
  options.legend.rich.b.width = 100
  options.legend.rich.c.width = 100
}
watch(
  () => homeAreaPie.value,
  () => {
    // 重新赋值options.data
    options.data.splice(0, options.data.length, ...homeAreaPie.value.info)
  },
  { deep: true }
)
</script>
<template>
  <card-box componentName="AreaPie">
    <template v-slot:title>
      <h1
        :class="{
          subtitle: dialogInfoVisible,
        }"
      >
        {{ homeStore.homeAreaPie.title }}
      </h1>
    </template>
    <EchartPie :chart-data="options" v-if="homeAreaPie.info.length" />
    <div v-else class="default-img">
      <p>{{ $t('bi_common_nodata') }}</p>
    </div>
  </card-box>
</template>
<style lang="scss" scoped>
.default-img {
  width: 100%;
  text-align: center;
  padding: 120px 0;
  background-image: url('@/assets/images/canvsimage/default.png');
  background-repeat: no-repeat;
  background-position: center;

  font-size: 16px;
  color: #00f6ff;
}
.subtitle {
  font-size: 30px;
}
</style>
